<template>
	<view class="foodCard" @click="handleClick(item)" v-for="(item,index) in dataSource" :key="index">
		<view class="left">
			<!-- 左侧食物图片 -->
			<image class="image" :src="item.food_img" mode="aspectFill"></image>
			<view class="content">
				<!-- 食物名称 -->
				<view class="name">
					<text>{{item.food_name}}</text>
					<text class="unit" v-if="item.isPackage">({{item.metering}}) {{item.unit}}</text>
				</view>
				<!-- 食物热量以及计量 -->
				<view class="caloric">
					<text>{{item.caloric}}千卡/</text>
					<text>{{item.number+item.unit}}</text>
				</view>
			</view>
		</view>
		<view class="right" v-if="!item.isPackage&&type!=0">
			<text class="text">{{item.type==1?'推荐食用':item.type==2?'适量食用':item.type==3?'少量食用':''}}</text>
			<view :class="item.type==1?'green circle':item.type==2?'yellow circle':item.type==3?'red':''">

			</view>
		</view>
		<view class="right" v-else-if="item.isPackage&&type!=0">
			<text class="text">{{item.totalCaloric}}大卡</text>
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['click'])
	const props = defineProps({
		dataSource: {
			type: Array,
			default: []
		}
	})
	const handleClick = (e) => {
		emit("click", e)
	}
</script>

<style lang="scss">
	.foodCard {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;

		.image {
			width: 100rpx;
			height: 100rpx;
		}

		.left {
			display: flex;

			.content {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 10rpx;
				font-size: 22rpx;
				color: #909399;

				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: #121212;

					.unit {
						font-size: 22rpx;
						color: #afafaf;
					}
				}
			}
		}

		.right {
			display: flex;
			align-items: center;

			.text {
				font-size: 24rpx;
				color: #909399;
				margin-right: 10rpx;
			}

			.circle {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;

			}
		}
	}



	.green {
		background-color: #87C38F;
	}

	.yellow {
		background-color: #F4CC23;
	}

	.red {
		background-color: #F07869;
	}
</style>